<template>
  <div class="hello">
    <!-- form card -->
    <el-card
      v-for="(e, i) in dataForm"
      :key="e.index"
      :class="e.formStyle || 'box-card'"
    >
      <div
        slot="header"
        class="clearfix"
      >
        <span>{{ e.formName }}</span>
      </div>
      <el-form
        :ref="dataForm[i].formRef"
        :inline="true"
        :model="dataForm[i]['formModel']"
        class="demo-form-inline"
      >
        <el-col :span="24">
          <el-col

            v-for="item in e.formComponent"
            :key="item.model"
            :span="item.span ? item.span : 5"
          >
            <el-form-item

              :label-width="item.labelWidth||'120px'"
              :prop="item.model"
              :rules="item.rules"
              :label="item.label"
              class="postInfo-container-item"
            >
              <!-- input-->
              <el-input
                v-if="item.type == 'input'"
                v-model="dataForm[i]['formModel'][item.model]"
                style="width: 150px"
                class="filter-item"
                @keyup.enter.native="item.keyUpEnter"
              />
              <!-- inputTextArea-->

              <el-input
                v-if="item.type == 'textArea'"
                v-model="dataForm[i]['formModel'][item.model]"
                type="textarea"
                :rows="3"
              />
              <!-- select-->
              <el-select
                v-if="item.type == 'select'"
                v-model="dataForm[i]['formModel'][item.model]"
                :placeholder="item.placeholder"
                clearable
                style="width: 150px"
                class="filter-item"
              >
                <el-option
                  v-for="e in item.option"
                  :key="e.value||e"
                  :label="e.label||e"
                  :value="e.value||e"
                />
              </el-select>
              <!--cascader -->
              <el-cascader
                v-if="item.type === 'cascader' "
                v-model="dataForm[i]['formModel'][item.model]"
                :options="item.option"
                :props="{emitPath:false}"
                clearable
                style="width: 150px"
                class="filter-item"
              />
              <!--单一选择raido -->
              <el-col v-if="item.type == 'selectOneRadio'">
                <el-col
                  v-for="e in item.option"
                  :key="e"
                >
                  <el-radio
                    v-model="dataForm[i]['formModel'][item.model]"
                    :label="e.value"
                  >{{ e.label }}</el-radio>
                </el-col>
              </el-col>
              <!-- select radio 带单位和input的复合输入框 -->
              <el-col v-if="item.type == 'selectRadio'">
                <el-input
                  v-model="dataForm[i]['formModel'][item.model]"
                  style="width: 150px"
                  class="filter-item"
                  @keyup.enter.native="item.keyUpEnter"
                />
                <el-radio-group v-model="dataForm[i]['formModel'][item.unit]">

                  <el-radio-button
                    v-for="e in item.option"
                    :key="e.value||e"
                    :label="e.value||e"
                    :value="e.value||e"
                  >{{ e.label }}</el-radio-button>
                </el-radio-group>
              </el-col>
              <!--mulSelect checkbox -->
              <el-checkbox-group
                v-if="item.type == 'selectCheck'"
                v-model="dataForm[i]['formModel'][item.model]"
              >
                <el-checkbox
                  v-for="e in item.option"
                  :label="e.value"
                >{{ e.label }}</el-checkbox><!-- 注意这个label动态绑定的为value-->
              </el-checkbox-group>
              <!-- datepicker-->
              <el-date-picker
                v-if="item.type == 'datePicker'"
                v-model="dataForm[i]['formModel'][item.model]"
                style="width: 150px"
              />
              <!-- dateRangepicker -->
              <el-date-picker
                v-if="item.type == 'dateRangepicker'"
                v-model="dataForm[i]['formModel'][item.model]"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
              <el-upload
                v-if="item.type == 'upload'"
                class="upload-demo"
                :limit="1"
                action="https://jsonplaceholder.typicode.com/posts/"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :file-list="fileList"
                list-type="picture"
              >
                <el-button
                  size="small"
                  type="primary"
                >点击上传</el-button>
                <div
                  slot="tip"
                  class="el-upload__tip"
                >
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-col>
      </el-form>
    </el-card>
    <!-- 提交 -->

    <!-- <el-col v-for="item in buttonGroups" :key="item.name" :span="item.span||2" :offset="item.index==0? 6:0">
      <el-button :type="item.style || ''" @click="enterForm" >{{item.name}}</el-button>
    </el-col> -->
  </div>
</template>

<script>
export default {
  props: ['dataForm'],
  data() {
    return {
      buttonGroups: [],
      dataModel: [...this.dataForm],
      // dataModel: this.dataModel.formComponent,
      // listQuery: this.dataModel.formComponent,
      formRules: this.dataForm.formRules,
      downloadLoading: false,
      fileList: [],
      makeData: this.dataForm
      //  makeData:[{
      //    formRef:'formFirst',//表单ref
      //    formModel:this.dataModel.formModel,//表单model
      //   formComponent:this.dataModel.formComponent,
      //    formName:'表单A'//表单标题
      //   },{
      //   formRef:'formSecond',
      //    formModel:this.dataModel.formModel,
      //     formComponent:this.dataModel.formComponent,
      //    formName:'表单B'
      //   },{
      //     formRef:'formThird',
      //    formModel:this.dataModel.formModel,
      //     formComponent:this.dataModel.formComponent,
      //    formName:'表单C'
      //   }],
    }
  },
  mounted() {
    console.log(this)
  },
  // watch:{
  //   'dataForm':{
  //     handler:function(val){
  //       this.dataModel=val
  //     },
  //     deep:true
  //   }
  // },
  created() {
    console.log(this.$store.state, 'state')
    console.log(this.$route.path, 'router')
    this.buttonGroups = this.getButtonGroupsByUrl(this.$route.path)
    console.log(this.getButtonGroupsByUrl(this.$route.path))
  },
  methods: {
    getButtonGroupsByUrl(router) {
      const getButtonGroups = JSON.parse(localStorage.getItem('buttonGroups'))
      return getButtonGroups[router]
    },
    enterForm(validDataFromParent) {
      // 动态表单提交
      console.log(this.$refs)
      const arrForm = [] // 哪些表单需要做校验
      const arrModel = [] // 表单的值
      const newArr = [] // 承接promise的返回结果
      const _self = this
      this.dataForm.forEach((item, index) => {
        // 将有权限的表单做校验等等

        checkForm(item.formRef) // 校验
        arrModel.push(item) // 需要校验的表单的值
      })
      function checkForm(arrName) {
        // 根据form表单的ref，动态生成promise，再对其坐表单校验，都通过了再去做处理
        console.log(_self.$refs[arrName], '-----')
        var result = new Promise(function(resolve, reject) {
          _self.$refs[arrName][0].validate(valid => {
            if (valid) {
              resolve()
            } else {
              reject()
            }
          })
        })
        newArr.push(result) // push 得到promise的结果
      }
      console.log()
      Promise.all(newArr)
        .then(res => {
          // 都通过了
          console.log(arrModel)
          console.log('恭喜，表单全部验证通过')
          // console.log(this.$validNum);
          // this.$validNum=this.$validNum+1
          // console.log(this.$validNum);
          validDataFromParent()
        })
        .catch(err => {
          // console.log(arrModel);
          // console.log("err");
          // validDataFromParent=1
        })
    }
  }
}
</script>

<style scoped>
.box-card {
  border: 0px;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);
}
.box-margin-card {
  margin-top: 20px;
  border: 0px;
  background-color: #fff;
  overflow: hidden;
  color: #303133;
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.1);
}
.edit-form-button {
  margin: 20px 0;
}
</style>
